<template>
    <div>
        <!-- 卡片 -->
        <el-card>
            <el-row>
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格展示 -->
      <el-table :data="list"
                style="width: 100%">
        <el-table-column type="index" label="#"> 
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格(元)">
        </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status !== '0'"
              >已付款</el-tag
            >
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货">
        </el-table-column>
        <el-table-column prop="" label="下单时间">
          <template slot-scope="scope">
            <p>{{ scope.row.create_time | timer }}</p>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="dialogFormVisible =true"
            ></el-button>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-location"
              circle
              @click="kuaidiFn"
            ></el-button>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getOrdersParams.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="getOrdersParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
        </el-card>
        <!-- 修改地址 -->
        <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
          <el-form :model="addorderform">
        <el-form-item  label="省市区/县" :label-width="formLabelWidth">
          <el-cascader
            :options="options"
            :props="addressProps"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item  label="详细地址" :label-width="formLabelWidth">
            <el-input></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button>
      </div>
          </el-dialog>
              <!-- 物流信息 -->
     <el-dialog title="物流信息" :visible.sync="dialogKuaidiFormVisible">
        
        <el-timeline :reverse="reverse">
            <el-timeline-item
            v-for="(activity, index) in activities.data"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
            </el-timeline-item>
        </el-timeline>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogKuaidiFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogKuaidiFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    </div>
</template>
<script>
import {getorders} from '@/http/orders.js'
import {china} from "./china"
import {kuaidi} from "./kuaidi"
export default {
    data() {
        return {
            list:[],
            getOrdersParams: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      total:0,
      dialogFormVisible:false,
      formLabelWidth:"120px",
      addorderform: {},
      options: china,
      addressProps:{ checkStrictly: true ,value:"code",label:"value"},
      dialogKuaidiFormVisible:false,
      reverse: false,
        activities: kuaidi
        }
    },
    methods: {
        async order(){
let res =await getorders(this.getOrdersParams);
            console.log(res);
            this.list=res.data.goods
            this.total=res.data.total
        },
        handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getOrdersParams.pagesize=val
      this.order()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getOrdersParams.num=val
      this.order()
    },
    async kuaidiFn(){
        this.dialogKuaidiFormVisible=true;
    }
    },
    components:{},
    computed:{},
    watch:{},
    created() {
        this.order()
    },
}
</script>
<style lang="scss" scoped>
</style>